<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>人员档案</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
  <style>
    .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
    .icon {margin-right:10px;color:#1aa094;}
    .icon-cray {color:#ffb800!important;}
    .icon-blue {color:#1e9fff!important;}
    .icon-tip {color:#ff5722!important;}
    .layuimini-qiuck-module {text-align:center;margin-top: 10px}
    .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
    .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
    .welcome-module {width:100%;height:210px;}
    .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:10px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .layui-bg-number {background-color:#F8F8F8;}
    .layuimini-notice:hover {background:#f6f6f6;}
    .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
    .layuimini-notice-title,.layuimini-notice-label {
      padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
    .layuimini-notice-title {line-height:28px;font-size:14px;}
    .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
  </style>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">
      <a id="uploadExcel"  style="position: absolute;right: 120px;color: #009688">导入Excel</a>
      <a href="/downloadExcelTemplate/staff"  style="position: absolute;right: 32px;color: #009688" id="downloadStaffExcelTemplate">下载模板</a>
      <br>
      <fieldset class="layui-elem-field">
        <legend>档案信息</legend>
        <div class="layui-field-box">
          <form class="layui-form layui-form-pane" action="">
            <span style="color: #009688">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;基本信息</span>
            <hr class="layui-border-green">
            <div class="layui-form-item">
              <label class="layui-form-label required">姓名</label>
              <div class="layui-input-inline">
                <input type="text" name="staffName" lay-verify="required|username" lay-verType="tips"
                       autocomplete="off" class="layui-input">
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>性别</label>
              <div class="layui-input-inline">
                <select id="sex" name="sex" lay-filter="sex" required>
                  <option value="男" selected>男</option>
                  <option value="女">女</option>
                </select>
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>出生日期</label>
              <div class="layui-input-inline">
                <input type="text" id="birthday" name="birthday" placeholder="yyyy-mm-dd" lay-verify="required|date" lay-verType="tips"
                       autocomplete="off" class="layui-input">
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>身份证号码</label>
              <div class="layui-input-inline">
                <input type="text" name="idNumber" lay-verify="required|identity" lay-verType="tips"
                       autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red">*</span>政治面貌</label>
              <div class="layui-input-inline">
                <select name="politicsStatus" lay-verify="required">
                  <option value="">请选择</option>
                  <option value="团员">团员</option>
                  <option value="中共党员">中共党员</option>
                  <option value="群众">群众</option>
                  <option value="其他">其他</option>
                </select>
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>婚姻状态</label>
              <div class="layui-input-inline">
                <select lay-verify="required" name="marriage">
                  <option selected value="未婚">未婚</option>
                  <option value="已婚">已婚</option>
                </select>
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>籍贯</label>
              <div class="layui-input-inline">
                <select lay-verify="required" name="nativePlace">
                  <option value="">请选择</option>
                  <option value="北京市">北京市</option>
                  <option value="天津市">天津市</option>
                  <option value="河北省">河北省</option>
                  <option value="山西省">山西省</option>
                  <option value="内蒙古">内蒙古</option>
                  <option value="辽宁省">辽宁省</option>
                  <option value="吉林省">吉林省</option>
                  <option value="黑龙江">黑龙江</option>
                  <option value="上海市">上海市</option>
                  <option value="江苏省">江苏省</option>
                  <option value="浙江省">浙江省</option>
                  <option value="安徽省">安徽省</option>
                  <option value="福建省">福建省</option>
                  <option value="江西省">江西省</option>
                  <option value="山东省">山东省</option>
                  <option value="河南省">河南省</option>
                  <option value="湖北省">湖北省</option>
                  <option value="湖南省">湖南省</option>
                  <option value="广东省">广东省</option>
                  <option value="广西省">广西省</option>
                  <option value="海南省">海南省</option>
                  <option value="重庆市">重庆市</option>
                  <option value="四川省">四川省</option>
                  <option value="贵州省">贵州省</option>
                  <option value="云南省">云南省</option>
                  <option value="西藏<">西藏</option>
                  <option value="陕西省">陕西省</option>
                  <option value="甘肃省">甘肃省</option>
                  <option value="青海省">青海省</option>
                  <option value="宁夏省">宁夏省</option>
                  <option value="新疆">新疆</option>
                  <option value="台湾">台湾</option>
                  <option value="香港">香港</option>
                  <option value="澳门">澳门</option>
                  <option value="海外">海外</option>
                </select>
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>个人手机号</label>
              <div class="layui-input-inline">
                <input lay-verify="required|phone" type="text" name="phone" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red">*</span>家庭住址</label>
              <div class="layui-input-inline">
                <input style="width: 500px" name="familyAddress" type="text" class="layui-input">
              </div>
              <label style="float: left;right: -310px" class="layui-form-label">
                <span style="color: red">*</span>当前住址</label>
              <div class="layui-input-inline">
                <input style="position:absolute;right:-620px;width: 500px" name="currentAddress" type="text" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red">*</span>电子邮箱</label>
              <div class="layui-input-inline">
                <input lay-verify="required|email" name="email" type="text" class="layui-input">
              </div>
              <label class="layui-form-label">毕业院校</label>
              <div class="layui-input-inline">
                <input  name="graduateSchool" type="text" class="layui-input">
              </div>
              <label class="layui-form-label">专业</label>
              <div class="layui-input-inline">
                <input  name="specialty" type="text" class="layui-input">
              </div>
              <label class="layui-form-label">毕业日期</label>
              <div class="layui-input-inline">
                <input type="text" id="graduationDate" name="graduationDate" placeholder="yyyy-mm-dd"
                       autocomplete="off" class="layui-input">
              </div>
            </div>
            <span style="color: #009688">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;入职信息</span>
            <hr class="layui-border-green">
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red">*</span>入职日期</label>
              <div class="layui-input-inline">
                <input type="text" id="hiredate" name="hiredate" placeholder="yyyy-mm-dd" lay-verify="required|date"
                       autocomplete="off" class="layui-input">
              </div>
              <label class="layui-form-label">转正日期</label>
              <div class="layui-input-inline">
                <input type="text" id="conversionTime" name="conversionTime" placeholder="yyyy-mm-dd"
                       autocomplete="off" class="layui-input">
              </div>
<!--              <label class="layui-form-label">离职日期</label>
              <div class="layui-input-inline">
                <input type="text" id="leaveTime" name="leaveTime" placeholder="yyyy-mm-dd"
                       autocomplete="off" class="layui-input">
              </div>-->
              <label class="layui-form-label">人员分类</label>
              <div class="layui-input-inline">
                <select lay-verify="required" name="category">
                  <option selected value="在职人员">在职人员</option>
                  <option value="人才储备">人才储备</option>
                  <option value="离职人员">离职人员</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red">*</span>所属部门</label>
              <div class="layui-input-inline">
                <select id="departmentFirstLevel" name="departmentFirstLevel" lay-filter="departmentFirstLevel" lay-verify="required">
                  <option value=""></option>
                </select>
              </div>
              <label class="layui-form-label"><span style="color: red">*</span>所属岗位</label>
              <div class="layui-input-inline">
                <select id="departmentSecondaryLevel" name="departmentSecondaryLevel" lay-filter="departmentSecondaryLevel"  lay-verify="required">
                  <option value=""></option>
                </select>
              </div>
              <label class="layui-form-label">直接上级</label>
              <div class="layui-input-inline">
                <input type="text" name="directSuperior" autocomplete="off" class="layui-input">
              </div>
              <label class="layui-form-label">银行账号</label>
              <div class="layui-input-inline">
                <input type="text" name="bankAccount" autocomplete="off" class="layui-input">
              </div>
            </div>
            <span style="color: #009688">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他信息</span>
            <hr class="layui-border-green">
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color: red">*</span>用户名</label>
              <div class="layui-input-inline">
                <input type="text" name="loginName" autocomplete="off" class="layui-input" lay-verify="required">
              </div>
              <label class="layui-form-label">初始密码</label>
              <div class="layui-input-inline">
                <input style="color: #8D8D8D" type="text" name="password" value="123456" autocomplete="off" class="layui-input" readonly>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">备注</label>
              <div class="layui-input-block">
                <textarea name="directSuperior" placeholder="请输入内容" class="layui-textarea"></textarea>
              </div>
<!--              <label class="layui-form-label">附件上传</label>
              <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
              </div>-->
            </div>
            <div class="layui-form-item">
              <div class="layui-upload">
                    <button type="button" class="layui-btn" id="uploadImg">上传照片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1">
                        <p id="demoText"></p>
                    </div>
                    <div style="width: 95px;">
                        <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                            <div class="layui-progress-bar" lay-percent=""></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
              <div style="float: right" class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
        </div>
      </fieldset>
  </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../../js/userAuth.js"></script>
<script type="text/javascript">

  //日期选择器渲染
  layui.use('laydate', function(){
    var laydate = layui.laydate;
    //常规用法
    laydate.render({
      elem: '#birthday',
    });
    laydate.render({
      elem: '#graduationDate'
    });
    laydate.render({
      elem: '#hiredate'
    });
    laydate.render({
      elem: '#conversionTime'
    });
    laydate.render({
      elem: '#leaveTime'
    });
  });

  //我们引用的是layui.js而非layui.all.js,采用模块开发方式,所以需要用layui.use
  layui.use(['layer', 'form','miniTab'], function() {
    var form = layui.form,
        miniTab= layui.miniTab;
    form.verify({
      username: function(value, item) { //value：表单的值、item：表单的DOM对象
        if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
          return '用户名不能有特殊字符';
        }
        if (/(^\_)|(\__)|(\_+$)/.test(value)) {
          return '用户名首尾不能出现下划线\'_\'';
        }
        if (/^\d+$/.test(value)) {
          return '用户名不能全为数字';
        }
      },
    });

    //当你需要使用ajax提交表单时,可监听表单提交
    //立即提交按钮要设置lay-submit属性,才能被监听
    //submit(formDemo) 表示只监听 含有lay-filter="formDemo" 的按钮
    form.on('submit(formDemo)', function(data) {
      //data.field 是一个json对象,批量获取表单的值{'表单的name':'对应的值'}
      data.field.staffDepartmentId = selectDepartmentId;
      data.field.staffJobId = selectJobId;
      data.field.headImg = headImg;
      console.log("部门id="+data.field.staffDepartmentId)
      console.log("岗位id="+data.field.staffJobId)
      $.ajax({
        url:'/staff/insert',
        method:'post',
        contentType:"application/json;charset=utf-8",
        datatype:"text",
        data:JSON.stringify(data.field),
        success : function(response) {
          layer.msg(response.msg)
          if (response.code === 200) {
            setTimeout(function (){
              miniTab.deleteCurrentByIframe();
            }, 800);
          }
        },
        error : function(response) {
          layer.msg("信息有误！请检查！")
        }
      })
      //return false 可以阻止 表单提交(刷新页面)
      return false;
    });
  })
</script>
<!--部门岗位联动选择-->
<script>
  layui.use(['layer', 'form'], function() {
    var form = layui.form;
    function initDepartmentFirstLevel(){
      $.ajax({
        url: "/department/selectAll",
        //data:{"searchParams":"","page2":"1","limit":"99"},
        success: function (responseData) {
          if (responseData.code === 200) {
            var length = responseData.data.length;
            //console.log("一级部门数量:"+length);
            //console.log("date:"+responseData.data);
            $("#departmentFirstLevel").empty();
            $("#departmentFirstLevel").append('<option value=""></option>');
            for(var i = 0; i < length; i++) {
              //添加option元素
              $("#departmentFirstLevel").append("<option value='" + responseData.data[i].departmentId + "'>" + responseData.data[i].departmentName + "</option>");
            }
            //渲染select
            form.render('select');
          } else {
            layer.msg("加载列表失败");
          }
        }
      });
    }
    form.on('select(sex)',function(e) {
      var sex = $("select[name='sex']").val();
      var sex2 = e.value;
      console.log(sex2);
      form.render("select")
    })
    //直接初始化部门
    initDepartmentFirstLevel();
    // initDepartmentSecondaryLevel();
    function initDepartmentSecondaryLevel(departmentId){
      $.ajax({
        url: "/job/selectByDepartmentId?jobDepartmentId="+departmentId,
        //data:{"searchParams":"{'departmentFirstLevel':'"+$("#departmentFirstLevel").val()+"'}","page2":"1","limit":"99"},
        success: function (responseData) {
          if (responseData.code === 200) {
            var length = responseData.data.length;
            console.log("二级部门数量:"+length);
            console.log("二级部门id:"+responseData.data[0].jobId);
            $("#departmentSecondaryLevel").empty();
            $("#departmentSecondaryLevel").append('<option value=""></option>');
            for(var i = 0; i < length; i++) {
              //添加option元素
              $("#departmentSecondaryLevel").append("<option value='" + responseData.data[i].jobId + "'>" + responseData.data[i].jobName + "</option>");
            }
            //渲染select
            form.render('select');
          } else {
            layer.msg("加载列表失败");
          }
        }
      });
    }
    form.on('select(departmentFirstLevel)', function(data){
      selectDepartmentId = data.value;
      console.log(selectDepartmentId);
      //根据一级部门联动二级部门
      initDepartmentSecondaryLevel(selectDepartmentId);
    });
    form.on('select(departmentSecondaryLevel)', function(data){
      selectJobId = data.value;
      console.log(selectJobId);
    });
  })
  var selectDepartmentId;
  var selectJobId;
</script>
<!--文件上传-->
<script>
    var headImg;
    layui.use(['upload', 'element', 'layer'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,element = layui.element
            ,layer = layui.layer;
        var uploadInst = upload.render({
        elem: '#uploadImg'
        ,url: '/staff/insertHeadImg' //改成您自己的上传接口
        ,before: function(obj){
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
            $('#demo1').attr('src', result); //图片链接（base64）
          });
          element.progress('demo', '0%'); //进度条复位
          layer.msg('上传中', {icon: 16, time: 0});
        }
        ,done: function(res){
          //如果上传失败
          if(res.code !== 200){
            return layer.msg(res.msg);  // 上传失败提示信息
          }
          // 下面的操作是上传成功的时候，需要更新到头像地址内容
          headImg = res.data;                  // 保存用户的更新的头像地址
          console.log("newImg:  "+headImg);
          $("#headImg").attr("src", headImg);
          //上传成功的一些操作
          //……
          $('#demoText').html(''); //置空上传失败的状态
        }
        ,error: function(){
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function(){
            uploadInst.upload();
          });
        }
        //进度条
        ,progress: function(n, elem, e){
          element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
          if(n == 100){
            layer.msg('上传完毕', {icon: 1});
          }
        }
      });

        upload.render({
          elem: '#uploadExcel'
          ,url: '/importExcel/staff' //此处配置你自己的上传接口即可
          ,accept: "file"
          ,exts: 'xls|xlsx' //只允许上传文件
          ,done: function(res){
            layer.msg(res.msg);
            console.log(res)
          }
        });
    })

</script>
</body>
</html>